<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }

        /*body{
            background: url(./imgs/01.jpg) no-repeat;
            background-size: cover;
        }*/

        .box{
            width: 350px;
            height: 250px;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            background: rgba(77,80,82,0.85);
            border-radius: 4%;
        }

        .h1, .upper, .below{
            margin-top: 25px;
        }

        h1,input,button{
            color: white;
        }

        .upper, .below, button{
            cursor: pointer;
        }

        @font-face {
            font-family: 'iconfont';
            src: url('iconfont.eot');
            src: url('iconfont.eot?#iefix') format('embedded-opentype'),
                url('iconfont.woff2') format('woff2'),
                url('iconfont.woff') format('woff'),
                url('iconfont.ttf') format('truetype'),
                url('iconfont.svg#iconfont') format('svg');
        }

        .box .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 2em;
            color: #fff;
            vertical-align: middle;
        }

        .box .upper i::before{
            overflow: hidden;
            position: absolute;
            height: 0;
            color: skyblue;
            content: "\e605";
            border-bottom: 2px solid skyblue;
            transition: 0.3s;
        }

        .box .below i :hover::before {
            height: 32px;
            transition: 0.3s;
        }

        .box .below i::before{
            overflow: hidden;
            position: absolute;
            height: 0;
            color: pink;
            content: "\e605";
            border-bottom: 2px solid pink;
            transition: 0.3s;
        }

        .box .upper i :hover::before {
            height: 32px;
            transition: 0.3s;
        }

        .box input {
            width:130px;
            height: 20px;
            line-height: 15px;
            border: 0;
            border-bottom: 2px solid #ccc;
            outline: none;
            background: transparent;
            padding: 5px 10px;
        }

        input::-webkit-input-placeholder {
            color: #ccc;
        }

        .box button{
            width: 200px;
            height: 30px;
            transform: translateY(65%);
            font-size: 18px;
            letter-spacing: 5px;
            border:0;
            border-radius: 30px;
            outline: none;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4,
                    #f441a5, #ffeb3b, #03a9f4);
            background-size:400%;
            transition: 0.2s;
        }


    </style>
</head>
<body>
    <div class = "box">
        <h1>Login</h1>
        <div class = "upper">
            <i class = "iconfont"></i>
            <input class = "text" placeholder="Username">
        </div>
        <div class = "below">
            <i class = "iconfont"></i>
            <input class = "text" placeholder="Password">
        </div>
        <button class = "lightBtn">登录</button>
    </div>
</body>
</html>